<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
		<style>
			h1,
			h2,
			h3,
			div,
			body,
			article {
				padding: 0;
				margin: 0;
			}

			h3 {
				text-align: center;
			}

			article {
				border: 3px solid black;
				background-color: whitesmoke;
				width: 80%;
				margin-top: 30px;
				margin-left: auto;
				margin-right: auto;
				padding: 0px 20px;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div><button id="button">chinese</button><button id="ini">初始化</button></div>
		<article>

		</article>
	</body>
	<script>
		const storage = window.localStorage;
		
		storage.page1 = JSON.stringify(["Basic concepts of flexbox",
			"The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model for distributing space between items and includes numerous alignment capabilities. This article gives an outline of the main features of flexbox, which we will explore in more detail in the rest of these guides",
			"When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals with layout in one dimension at a time —either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together."
		])
		storage.page2 = JSON.stringify(["flex 布局的基本概念",
			"Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索",
			"我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。"
		])
		//切换文字
		//1英语,2中文
		document.querySelector("#ini").onclick = function() {
			storage.switch = 1;
			initiating();
		}
		document.querySelector("#button").onclick = function() {
			if (JSON.parse(storage.switch) == 1) {
				storage.switch = 2;

			} else if (JSON.parse(storage.switch) == 2) {
				storage.switch = 1;
			}
			initiating();

		}

		function initiating() {
			var art = document.getElementsByTagName("article")[0]
			art.innerHTML = ""
			if (JSON.parse(storage.switch) == 1) {
				var h3 = document.createElement("h3");
				var page1 = JSON.parse(storage.page1);
				h3.innerText = page1[0];art.appendChild(h3);
				for (var x = 1; x < page1.length; x++) {
					var docu = document.createElement("div")
					docu.innerText = page1[x]
					art.appendChild(docu);
				}
				document.querySelector("#button").innerText = "chinese"

			} else if (JSON.parse(storage.switch) == 2) {
				console.log(2)
				var h3 = document.createElement("h3");
				var page2 = JSON.parse(storage.page2)
				h3.innerText = page2[0];
				art.appendChild(h3);
				for (var x = 1; x < page2.length; x++) {
					var docu = document.createElement("div")
					docu.innerText = page2[x]
					art.appendChild(docu);
				}
				document.querySelector("#button").innerText = "英语";
			}
			document.body.appendChild(art)

		}
		
		window.onload = function() {
			if(storage.getItem("switch")==null){
				storage.switch=1;
			}
			initiating();
		}
		// 3、多语言页面动态切换?
		// 题目：开发一个支持多语言的国际化网站，用户可以通过点击语言切换按钮（如中文、英文、日文），
		// 利用 BOM 的location.href和localStorage实现页面语言的动态切换，并记住用户选择的语言，下次访问时自动显示上次选择的语言。?

		// 提示：点击语言切换按钮时，将语言标识存入localStorage，同时修改location.href跳转至对应语言版本的页面；页面加载时，从localStorage获取语言标识，加载相应的语言资源文件。
	</script>
</html>